<div>
  <div>
    <!-- #title写法相当于ref 来获取dom节点 -->
    <!-- 给装饰器 @ViewChild('title')使用 -->
    <h1 #title=>TodoList</h1>
    <input 
      type="text"
      placeholder="Input some..."
      [(ngModel)]="todoText"
    >
    <button (click)="addTodo()">Add</button>
  </div>
  <div>
    <ul>
      <li
        *ngFor="let todo of todoData"
      >
        <input 
          type="checkbox"
          [checked]="todo.completed"
          (click)="toggleTodo(todo.id)"
        >
        <span
          [class]="{ 'completed': todo.completed }"
        >
          {{ todo.content }}
        </span>
        <button (click)="removeTodo(todo.id)">Delete</button>
      </li>
    </ul>
  </div>
</div>
